<template>
	<view class="">
		<view class="form-title">联系人信息</view>
		<u-form :model="form" ref="uForm_3" label-position="top" :label-style="labelStyle">
			<view class="u-p-x-30">
				<u-form-item label="联系人姓名" prop="contact">
					<u-input v-model="form.contact" placeholder="请填写联系人姓名"/>
				</u-form-item>
				<u-form-item label="联系人电子邮箱" prop="contact_email">
					<u-input v-model="form.contact_email " placeholder="请填写联系人电子邮箱"/>
				</u-form-item>
				<u-form-item label="联系人电话" prop="contact_phone">
				<view class="flex flex-1">
					<u-input class="flex-1" v-model="form.contact_phone" type="number" placeholder="请填写店铺联系人电话"/>
				</view>
				</u-form-item>
			</view>
		</u-form>
		<view class="bg-white">
			<view class="flex align-center justify-evenly u-p-30">
				<dy-button width="250rpx" size="default" color="#FE572A" backgroundColor="#fff" borderColor="#FE572A" @click="back">上一步</dy-button>
				<dy-button width="250rpx" size="default" @click="submit">下一步</dy-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'Step3',
		data() {
			return {
				form: {
					contact: '',
					contact_email: '',
					contact_phone: '',
				},
				rules: {
					contact: [{
						required: true,
						message: '请填写联系人姓名',
						trigger: ['blur', 'change']
					}],
					contact_email: [{
						required: true,
						message: '请填写联系人电子邮箱',
						trigger: ['blur', 'change']
					}],
					contact_phone: [
						{
							required: true,
							message: '请输入正确的手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (!this.$u.test.mobile(value)) {
									callback(new Error("请输入正确的手机号码"));
								} else {
									callback();
								}
							}
						},
					]
				},
				labelStyle:{
					fontSize: '28rpx',
					fontWeight:'bold',
				}
			}
		},
		props: {
			logData: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		async mounted() {
			this.$refs.uForm_3.setRules(this.rules);
			this._applyIndex()
		},
		methods: {
			_applyIndex() {
				if(JSON.stringify(this.logData) === '{}'){
					let applyForm = uni.getStorageSync('applyForm_3')
					if(applyForm){
						Object.keys(this.form).forEach(key => {
							if (applyForm.hasOwnProperty(key)) {
								this.form[key] = applyForm[key];
							}
						})
						this.log = applyForm
					}
				}else{
					Object.keys(this.form).forEach(key => {
						if (this.logData.hasOwnProperty(key)) {
							this.form[key] = this.logData[key];
						}
					})
					this.log == this.logData
				}
				this.form.captcha = ''
			},
			back(){
				this.$emit('back');
			},
			submit(){
				this.$refs.uForm_3.validate(valid => {
					if (valid) {
						uni.setStorageSync('applyForm_3', this.form)
						this.$emit('submit', this.form);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form-title{
		font-size: 36rpx;
		font-weight: bold;
		margin: 10rpx 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 6rpx solid #c7c7c7;
	}
</style>